<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lesson 19</title>
    <script src="../dist/vue.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // provide, inject
    // dom ref
    // const app = Vue.createApp({
    //   setup() {
    //     const { provide, ref, readonly } = Vue;
    //     const name = ref('dell');
    //     provide('name', readonly(name));
    //     provide('changeName', (value) => {
    //       name.value = value;
    //     });
    //     return { }
    //   },
    //   template: `
    //     <div>
    //       <child />
    //     </div>
    //   `,
    // });

    // app.component('child', {
    //   setup() {
    //     const { inject } = Vue;
    //     const name = inject('name');
    //     const changeName = inject('changeName');
    //     const handleClick = () => {
    //       changeName('lee');
    //     }
    //     return { name, handleClick }
    //   },
    //   template: '<div @click="handleClick">{{name}}</div>'
    // })

    // CompositionAPI 的语法下，获取真实的 DOM 元素节点
    const app = Vue.createApp({
      setup() {
        const { ref, onMounted } = Vue;
        const hello = ref(0);
        onMounted(() => {
          console.log(hello.value);
        });
        return { hello };
      },
      template: `
        <div>
          <div ref="hello">hello world</div>
        </div>
      `
    });

    const vm = app.mount("#root");
  </script>
</html>
